<!doctype html>
<html>
<head>
  <title>时间线</title>
  <script type="text/javascript" src="node_modules/vis-timeline/dist/vis-timeline-graph2d.min.js"></script>
  <link href="node_modules/vis-timeline/dist/vis-timeline-graph2d.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    #visualization {
      width: 600px;
      height: 400px;
      border: 1px solid lightgray;
    }
  </style>
</head>
<body>
<div id="visualization"></div>
<script type="text/javascript">
  // 为时间线分配DOM元素
  var container = document.getElementById('visualization');

  // 创建一个DataSet（实现双向数据绑定）
  var items = new vis.DataSet([
    {id: 1, 内容: '项目 1', 开始: '2014-04-20'},
    {id: 2, 内容: '项目 2', 开始: '2014-04-14'},
    {id: 3, 内容: '项目 3', 开始: '2014-04-18'},
    {id: 4, 内容: '项目 4', 开始: '2014-04-16', 结束: '2014-04-19'},
    {id: 5, 内容: '项目 5', 开始: '2014-04-25'},
    {id: 6, 内容: '项目 6', 开始: '2014-04-27', 类型: '点'}
  ]);

  // 时间线配置
  var options = {};

  // 创建时间线
  var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>